<template>
    <el-row class="productmanage">
        <el-col :span="24" class="content-header">商品管理</el-col>
        <el-card class="box">
            <el-form :inline="true" :model="productQueryForm"
            :label-position="labelPosition" label-width="100px">
                <el-form-item label="产品编号：">
                    <el-input v-model="productQueryForm.productNo" placeholder="产品编号"></el-input>
                </el-form-item>
                <el-form-item label="产品名称：">
                    <el-input v-model="productQueryForm.productName" placeholder="产品名称"></el-input>
                </el-form-item>
                <el-form-item label="产品类别：">
                    <el-input v-model="productQueryForm.category" placeholder="产品类别"></el-input>
                </el-form-item>
                <el-form-item label="状态：">
                    <el-select v-model="productQueryForm.status" placeholder="状态">
                        <el-option label="全部" value="0"></el-option>
                        <el-option label="新增" value="1"></el-option>
                        <el-option label="已上架" value="2"></el-option>
                        <el-option label="已下架" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="录入时间：">
                    <el-date-picker
                      v-model="productQueryForm.dateRange"
                      type="daterange"
                      range-separator="~"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="所属账套：">
                    <el-select v-model="productQueryForm.accountType" placeholder="所属账套">
                        <el-option label="账套一" value="1"></el-option>
                        <el-option label="账套二" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="query">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
             <el-row>
                <el-col :span="24">
                    <span>
                        <el-button type="primary" size="small" @click="addProduct"><i class="fa fa-plus fa-lg right-5"></i>新增</el-button>
                    </span>
                    <span>
                        <el-button type="danger" size="small"><i class="fa fa-close fa-lg right-5"></i>删除</el-button>
                    </span>
                    <span>
                        <el-button type="success" size="small"><i class="fa fa-thumbs-up fa-lg right-5"></i>上架</el-button>
                    </span>
                    <span>
                        <el-button type="warning" size="small"><i class="fa fa-thumbs-down fa-lg right-5"></i>下架</el-button>
                    </span>
                    <span>
                        <el-button type="primary" size="small"><i class="fa fa-cloud-download fa-lg right-5"></i>导出</el-button>
                    </span>
                    <el-table :data="productDataInfo" tooltip-effect="dark" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="40">
                        </el-table-column>
                        <el-table-column label="操作" width="205">
                            <template slot-scope="scope">
                                <span>
                                    <el-button type="warning" size="small" @click="editProduct(scope.row.productNo)">编辑</el-button>
                                </span>
                                <span>
                                    <el-button type="primary" size="small" @click="showProduct(scope.row.productNo)">查看</el-button>
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="productNo" label="商品编号" width="160">
                        </el-table-column>
                        <el-table-column prop="productName" label="名称">
                        </el-table-column>
                        <el-table-column prop="purchasePrice" label="采购价" width="80">
                        </el-table-column>
                        <el-table-column prop="retailPrice" label="零售价" width="80">
                        </el-table-column>
                        <el-table-column prop="accountType" label="所属账套">
                        </el-table-column>
                        <el-table-column prop="createDate" label="录入日期" width="100">
                        </el-table-column>
                        <el-table-column prop="status" label="状态">
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="24" class="pagination">
                    <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :page-sizes="[10, 20, 30, 40, 50]"
                      :page-size="10"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="listTotal">
                    </el-pagination>
                </el-col>
            </el-row>
        </el-card>
    </el-row>
</template>
<script>

import './productmanage.scss';
import router from '@/router/index';

export default {
    data() {
        return {
            labelPosition : this.global.labelPosition,
            goPage : this.global.goPage,
            productQueryForm : {
                productNo : "",
                productName : "",
                category : "",
                status : "",
                accountType : "",
                dateRange : "",
                startDate : "",
                endDate : "",
            },
            productDataInfo : [{
                productNo : "123",
                productName :"西瓜",
                purchasePrice : "1.5",
                retailPrice : "5",
                accountType : "账套一",
                createDate : "2017-12-12 10:01",
                status : "新增"
            },{
                productNo : "456",
                productName :"苹果",
                purchasePrice : "5",
                retailPrice : "15",
                accountType : "账套二",
                createDate : "2017-12-12 10:01",
                status : "上架"
            },{
                productNo : "789",
                productName :"橘子",
                purchasePrice : "4",
                retailPrice : "8",
                accountType : "账套二",
                createDate : "2017-12-12 10:01",
                status : "下架"
            }],
            currentPage : 1,
            listTotal : 3,
            multipleSelection : [],
            

        }
    },
    methods: {
        query : function(){

        },
        resetForm : function(){
            this.productQueryForm = {
                productNo : "",
                productName : "",
                category : "",
                status : "",
                accountType : "",
                dateRange : "",
                startDate : "",
                endDate : "",
            }
        },
        handleSelectionChange : function(val){
            this.multipleSelection = [];
            let length = val.length;
            for(let i = 0; i < length; i ++ ){
                let item = val[i];
                let _productNo = item.productNo;
                this.multipleSelection.push(_productNo);
            }
        },
        addProduct : function(){
            this.goPage(this.$router, 'productmanageadd');
        },
        editProduct : function(productNo){
            this.goPage(this.$router, 'productmanageedit', {productNo : productNo});
        },
        showProduct : function(productNo){
             this.goPage(this.$router, 'productmanagedetail', {productNo : productNo});
        },
        handleSizeChange : function(){

        },
        handleCurrentChange : function(){

        }


    },
    watch: {

    },
    mounted : function(){

    },
    created: function() {

    },
    beforeDestroy: function() {

    }
}
</script>